<template>
    <div class="app-container calendar-list-container">
        <basic-container>
            <el-form
                :model="queryForm"
                ref="queryFormRef"
                :inline="true"
                size="small"
            >
                <el-form-item>
                    <el-input placeholder="请输入业主名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input placeholder="请输入业主身份证号"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select placeholder="请选择状态">
                        <el-option />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input placeholder="请输入业主手机"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="primary"
                        icon="el-icon-search"
                        @click="handleSearch"
                        >查询</el-button
                    >
                    <el-button icon="el-icon-delete" @click="handleClear"
                        >重置</el-button
                    >
                </el-form-item>
            </el-form>
            <el-table :data="tableList" border stripe highlight-current-row>
                <el-table-column
                    type="index"
                    label="序号"
                    align="center"
                ></el-table-column>
                <el-table-column
                    label="绑定ID"
                    prop="a"
                    align="center"
                ></el-table-column>
                <el-table-column
                    label="业主ID"
                    prop="b"
                    align="center"
                ></el-table-column>
                <el-table-column
                    label="小区ID"
                    prop="c"
                    align="center"
                ></el-table-column>
                <el-table-column
                    label="小区名称"
                    prop="d"
                    align="center"
                ></el-table-column>
                <el-table-column
                    label="关联业主"
                    prop="e"
                    align="center"
                ></el-table-column>
                <el-table-column
                    label="身份证"
                    prop="f"
                    align="center"
                ></el-table-column>
                <el-table-column
                    label="手机号"
                    prop="g"
                    align="center"
                ></el-table-column>
                <el-table-column
                    label="状态"
                    prop="h"
                    align="center"
                ></el-table-column>
                <el-table-column
                    label="申请时间"
                    prop="i"
                    align="center"
                ></el-table-column>
                <el-table-column label="操作" align="center">
                    <template>
                        <el-button type="text" @click="handleUnBinding"
                            >解绑</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </basic-container>
    </div>
</template>

<script>
export default {
    name: "wonerBinding",
    data() {
        return {
            queryForm: {},
            tableList: [
                {
                    id: 1,
                    a: "a",
                    b: "b",
                    c: "c",
                    d: "d",
                    e: "e",
                    f: "f",
                    g: "g",
                    h: "h",
                    i: "i",
                },
            ],
        };
    },
    methods: {
        handleSearch() {},
        handleClear() {},
        handleUnBinding() {
            this.$confirm("确定解绑业主吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.$message({
                        type: "success",
                        message: "删除成功!",
                    });
                })
                .catch(() => {
                });
        },
    },
};
</script>

<style lang="scss" scoped>
.el-form-item {
    margin-right: 50px;
}
.el-table {
    margin-top: 10px;
}
</style>